<template>
  <queryLayout :body="search" :app-name="appName" :query-param.sync="queryParam" @search="loadGrid">
    <template slot="btn">
      <slot name="btn" />
    </template>
    <w-table
      :data="rows"
      :columns="columns"
      :is-paging="true"
      :paging="paging"
      row-key="Id"
      @load="loadGrid"
    >
      <template slot="action" slot-scope="e">
        <el-button
          icon="el-icon-view"
          size="mini"
          type="primary"
          circle
          @click="show(e.row)"
        />
      </template>
    </w-table>
  </queryLayout>
</template>

<script>
import moment from 'moment'
import * as queryApi from '@/customForm/api/queryForm'
import queryLayout from '../queryLayout/queryLayout.vue'
export default {
  components: {
    queryLayout
  },
  props: {
    isLoad: {
      type: Boolean,
      default: false
    },
    appName: {
      type: String,
      default: null
    },
    formId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      columns: [],
      rows: [],
      colList: [],
      search: null,
      colAlign: {
        0: 'left',
        1: 'center',
        2: 'right'
      },
      queryParam: [],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      }
    }
  },
  computed: {
  },
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    show(row) {
      this.$router.push({ name: 'appPageView', params: { id: row.Id, formId: this.formId }})
    },
    async reset() {
      const body = await queryApi.GetBody(this.formId)
      this.search = body.Search
      this.paging.Index = 1
      const cols = this.initChildren(body.Table.Column)
      cols.push({
        key: 'Action',
        title: '操作',
        align: 'left',
        width: 80,
        slotName: 'action'
      })
      this.columns = cols
      this.loadGrid()
    },
    initChildren(list) {
      if (list == null || list.length === 0) {
        return null
      }
      return list.map(c => {
        const col = {
          title: c.Label
        }
        if (c.Children == null || c.Children.length === 0) {
          col.sortable = 'custom'
          col.align = this.colAlign[c.align]
          col.key = c.Name
          col.sortby = c.SortName == null ? c.Name : c.SortName
          if (c.Width) {
            col.minWidth = c.Width + 'px'
          }
          this.colList.push({
            Id: c.Id,
            Name: c.Name,
            DataType: c.DataType,
            ColSet: c.ColSet
          })
        } else {
          col.children = this.initChildren(c.Children)
        }
        return col
      })
    },
    isNull(param) {
      if (param.Val != null && param.Val !== '') {
        return false
      } else if (param.Vals != null && param.Vals.length !== 0) {
        return false
      }
      return true
    },
    filters() {
      const list = []
      this.queryParam.forEach(c => {
        if (this.isNull(c) === false) {
          const data = Object.assign({}, c)
          delete data.key
          list.push(data)
        }
      })
      return list
    },
    async loadGrid() {
      const res = await queryApi.Query({
        FormId: this.formId,
        QueryParam: this.filters()
      }, this.paging)
      if (res.List) {
        res.List.forEach(a => {
          this.formatRow(a)
        })
        this.rows = res.List
      } else {
        this.rows = []
      }
      this.paging.Total = res.Count
    },
    formatRow(row) {
      this.colList.forEach(c => {
        const val = row[c.Name]
        if (val == null) {
          return
        }
        if (c.DataType === 5) {
          if (val === true) {
            if (c.ColSet == null) {
              row[c.Name] = '是'
            } else {
              row[c.Name] = c.ColSet.ActiveText ? c.ColSet.ActiveText : '是'
            }
          } else {
            if (c.ColSet == null) {
              row[c.Name] = '否'
            } else {
              row[c.Name] = c.ColSet.InactiveText ? c.ColSet.InactiveText : '否'
            }
          }
        } else if (c.DataType === 3 || c.DataType === 6 || c.DataType === 9) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format === 'time') {
            row[c.Name] = parseInt(val / 60) + ':' + (val % 60)
          } else if (format === 'ratio') {
            row[c.Name] = val + '%'
          }
        } else if (c.DataType === 7) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format == null) {
            row[c.Name] = moment(val).format('YYYY-MM-DD HH:mm')
          } else {
            row[c.Name] = moment(val).format(format)
          }
        } else if (c.DataType === 8) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format == null) {
            row[c.Name] = moment(val).format('YYYY-MM-DD')
          } else {
            row[c.Name] = moment(val).format(format)
          }
        }
      })
    }
  }
}
</script>

